<template>
  <div class="table-view">
    <div class="flex justify-end add-btn h-[32px]">
      <el-button
        type="primary"
        :disabled="disabled"
        v-if="!disabled"
        @click="addIngredient"
        ><svg-icon icon-class="add" />新增</el-button
      >
      <slot name="handle"></slot>
    </div>
    <el-table border height="500" :data="listData" :row-class-name="rowClassName">
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column minWidth="160">
        <template #header>
          <div>SKU(主)</div>
          <div>自定义SKU(主)</div>
        </template>
        <template #default="{ row }">
          <div>{{ sku }}</div>
          <div>{{ custom_sku }}</div>
        </template>
      </el-table-column>
      <el-table-column minWidth="160">
        <template #header>
          <div>SKU(辅料)</div>
          <div>自定义SKU(辅料)</div>
        </template>
        <template #default="{ row }">
          <div>{{ row.accessories_goods_sku?.sku }}</div>
          <div>{{ row.accessories_goods_sku?.custom_sku }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="accessory_name" label="辅料名称" minWidth="250">
        <template #default="{ row }">
          <div>{{ row.accessories_goods_sku?.sku_cn_title }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="unit_price" label="采购未税报价" minWidth="110">
        <template #header>
          <div>采购未税报价</div>
        </template>
        <template #default="{ row }">
          <dataAuthority
            auth="unit_price"
            :value="
              row.default_supplier?.unit_price ||
              row.accessories_goods_sku.default_supplier?.unit_price
            "
          ></dataAuthority>
        </template>
      </el-table-column>
      <el-table-column
        prop="purchase_untaxed_price"
        label="采购未税价（CNY）"
        minWidth="100"
      >
        <template #header>
          <div>采购未税价</div>
        </template>
        <template #default="{ row }">
          <dataAuthority
            auth="purchase_untaxed_price"
            :value="
              row.default_supplier?.purchase_untaxed_price ||
              row.accessories_goods_sku.default_supplier?.purchase_untaxed_price
            "
          ></dataAuthority>
        </template>
      </el-table-column>
      <el-table-column prop="unit_price_tax" label="采购含税价" minWidth="110">
        <template #header>
          <div>采购含税价</div>
        </template>
        <template #default="{ row }">
          <dataAuthority
            auth="unit_price_tax"
            :value="
              row.default_supplier?.unit_price_tax ||
              row.accessories_goods_sku.default_supplier?.unit_price_tax
            "
          ></dataAuthority>
        </template>
      </el-table-column>
      <el-table-column label="数量(主:辅料)" minWidth="110">
        <template #default="{ row }">
          <span>{{ row.quantity_main }}</span>
          <span v-if="row.quantity_main && row.quantity_auxiliary">:</span>
          <span>{{ row.quantity_auxiliary }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <div v-if="row.status == 1" class="flex items-center">
            <svg-icon class="mr-1" icon-class="state_finish_enable" />启用
          </div>
          <div v-else class="flex items-center">
            <svg-icon class="mr-1" icon-class="state_finish_cover" />禁用
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column label="操作" fixed="right" v-if="!disabled" width="100">
        <template #default="{ row, $index }">
          <div class="flex items-center">
            <el-link type="primary" @click="handleOpen(row, $index)">编辑</el-link>
            <el-divider direction="vertical" />
            <el-link type="danger" @click="handleDel($index)">删除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <IngredientForm
      ref="IngredientFormRef"
      :listData="listData"
      :custom_sku="custom_sku"
      :item="item"
      :supplierData="supplierInfo"
      @updateForm="updateForm"
    ></IngredientForm>
  </div>
</template>

<script setup lang="jsx" name="Sample">
import IngredientForm from "./Form.vue";
let handleType = reactive(inject("handleType"));
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
  custom_sku: {
    type: String,
    default: () => {
      return "";
    },
  },
  sku: {
    type: String,
    default: () => {
      return "";
    },
  },
  item: {
    type: Object,
    default: () => {
      return {};
    },
  },
  supplierInfo:{
    type: Array,
    default: () => [],
  }
});
const {supplierInfo} = toRefs(props)
const disabled = computed(() => {
  return (
    handleType.value == "view" ||
    (handleType.value == "edit" &&
      !(window.BTN_AUTH || []).includes("/goods/task/product/ingredient-info"))
  );
});

const listData = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit("update:modelValue", val);
  },
});

const custom_sku = computed({
  get: () => props.custom_sku || props.sku,
});

const IngredientFormRef = ref();
const currentIndex = ref("");

const handleOpen = (row, rowIndex) => {
  nextTick(() => {
    currentIndex.value = rowIndex;
    IngredientFormRef.value.open("edit", row);
  });
};
const updateForm = (row) => {
  const updatedList = [...listData.value];
  if (currentIndex.value !== "") {
    updatedList.splice(currentIndex.value, 1, row);
  } else {
    updatedList.push({ ...row });
  }
  listData.value = updatedList;
};
const rowClassName = ({ row }) => {
  if (row.delete === 1) {
    return "hidden-row";
  }
  return "";
};
const handleDel = (index) => {
  const updatedData = [...listData.value];
  if (
    handleType.value == "add" ||
    handleType.value == "copy" ||
    handleType.value == "createSKU"
  ) {
    updatedData.splice(index, 1);
  } else {
    updatedData[index].delete = 1;
  }
    listData.value = updatedData;
};

const addIngredient = () => {
  nextTick(() => {
    currentIndex.value = "";
    IngredientFormRef.value.open("add", {
      sku: "",
      custom_sku: custom_sku.value,
      status: 1,
    });
  });
};
</script>

<style lang="scss" scoped>
.table-view {
  padding: 0;
  border: none;
  padding-top: -44px;
  margin-top: -34px;
  :deep(.add-btn) {
    margin-bottom: 6px;
  }
  z :deep(.vxe-grid--toolbar-wrapper) {
    display: none;
  }
  :deep(.vx-table__content) {
    padding: 0;
  }
}
</style>
